<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper">
			<domxee-navbar :globalData="globalData" :scroll="scroll" back fixed minPadding>
				<view slot="title">
					<view id="title" class="fw-bolder">商品列表</view>
				</view>
			</domxee-navbar>
		</view>
		<view id="content_wrapper">
			<view id="search" v-if="renders.search.enable">
				<view class="search min-padding">
					<view class="search_box border-color page_bg d-flex align-items-center">
						<view class="domxee_icon search_icon color fw-bold">&#xe615;</view>
						<input type="text" class="main_text fw-bold search_input w-fill-available" v-model="data.sections.search_keyword" placeholder-class="vice_text" :placeholder="renders.search.placeholder">
						<view class="search_button bg text-nowrap" @click="searchAction">{{renders.search.button}}</view>
					</view>
				</view>
			</view>
			<view id="swicth" v-if="renders.switch.enable">
				<view class="swicth min-padding">
					<view class="swicth_box d-flex justify-content-between align-items-center">
						<view class="item d-flex align-items-center" v-for="(item, index) in renders.switch.lists" :key="index" @click="switchFilter(item)">
							<view :class="['text', data.sections.switch_alias == item.alias ? 'color fw-bolder' : '']">{{item.text}}</view>
						</view>
					</view>
				</view>
			</view>
			<view id="lists">
					<view class="lists min-padding">
						<view class="lists_box">
							<!-- <view id="domxee_good_lists">
								<view class="good_lists_box d-flex align-items-center flex-wrap">
									<view class="good" v-for="(good, index) in data.sections.goods.lists" :key="index" @click="navigateAction(good.alias, good.params)">
										<view class="good_box section">
											<view class="good_cover_box">
												<u--image :src="good.cover" width="340rpx" height="340rpx" radius="20rpx 20rpx 0rpx 0rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="good_cover">
												  <template v-slot:loading>
													 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
												  </template>
												  <template v-slot:error>
													 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
												  </template>
												</u--image>
											</view>
											<view class="good_title fw-bolder u-line-2">{{good.title}}</view>
											<view class="good_infos">
												<view class="good_sale_info d-flex align-items-center justify-content-between">
													<view class="good_price color fw-bolder">¥{{good.price}}</view>
													<view class="good_sale_count vice_text">浏览 {{good.view_count}}</view>
												</view>
												<view class="good_tag_info d-flex align-items-center">
													<s class="good_market_price less_text">{{good.market_price}}</s>
													<view class="good_tag bg" v-if="good.tag.length > 0">{{good.tag}}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="good_lists_loading" v-if="data.sections.goods.mode == 'loading'">
									<u-loading-icon mode="circle" :inactive-color="globalData.colors.theme.color" :textColor="globalData.colors.theme.color" :color="globalData.colors.current.vice" size="13" textSize="13" text="正在加载列表..."></u-loading-icon>
								</view>
								<view class="good_lists_finished text-center fw-bold vice_text" v-if="data.sections.goods.mode == 'finished'">— 已到底部 —</view>
								<view class="good_lists_empty text-center" v-if="data.sections.goods.mode == 'empty'">
									<view class="iconfont icon-search font-90"></view>
									<view class="text vice_text fw-bold">当前内容为空</view>
								</view>
							</view> -->
							<view id="domxee_good_lists_v101">
								<view class="good_lists_box d-flex justify-content-between align-items-center flex-wrap">
									<view class="good" v-for="(good, index) in data.sections.goods.lists" :key="index" @click="navigateAction(good.alias, good.params)">
										<view class="good_box section">
											<view class="good_cover">
												<u--image :src="good.cover" width="346rpx" height="346rpx" radius="20rpx 20rpx 0rpx 0rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="cover">
												  <template v-slot:loading>
													 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
												  </template>
												  <template v-slot:error>
													 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
												  </template>
												</u--image>
											</view>
											<view class="good_infos">
												<view class="good_title fw-bolder u-line-2">
													<span :class="['tag fw-bold', good.is_subsidy ? 'ZKLOGO subsidy' : 'bg']" v-if="good.tag">{{good.tag}}</span>{{good.title}}
												</view>
												<view class="superiorities">
													<scroll-view scroll-x="true" class="superiorities_box">
														<view class="contents d-flex align-items-center">
															<view class="item color border-color fw-bold" v-for="(superiority, s_index) in good.superiorities" :key="s_index">{{superiority}}</view>
														</view>
													</scroll-view>
												</view>
												<view class="prices">
													<view class="price fw-bolder color"><span>¥</span>{{good.price}}</view>
													<view class="bottom d-flex justify-content-between align-items-center">
														<s class="market_price fw-bold less_text">¥ {{good.market_price}}</s>
														<view class="viewer d-flex align-items-center">
															<view class="domxee_icon less_text">&#xe639;</view>
															<view class="number less_text">{{good.view_count}}</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="good_lists_loading" v-if="data.sections.goods.mode == 'loading'">
									<u-loading-icon mode="circle" :inactive-color="globalData.colors.theme.color" :textColor="globalData.colors.theme.color" :color="globalData.colors.current.vice" size="13" textSize="13" text="正在加载列表..."></u-loading-icon>
								</view>
								<view class="good_lists_finished text-center fw-bold vice_text" v-if="data.sections.goods.mode == 'finished'">— 已到底部 —</view>
								<view class="good_lists_empty text-center" v-if="data.sections.goods.mode == 'empty'">
									<view class="iconfont icon-search font-90"></view>
									<view class="text vice_text fw-bold">商品列表为空</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {

				},
				shows: {

				},
				renders: {
					search: {enable: false, placeholder: '', button: ''},
					switch: {enable: false, lists: [{text: '', alias: '', sort: false, filters: {}, sort_field: ''}]}
				},
				data: {
					sections: {
						switch_alias: 'default',
						search_keyword: '',
						sort_rules: {},
						filters: {},
						goods: {
							mode: 'loading',
							page: 1,
							lists: []
						}
					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			if (that.ready) {
				//初始数据
				that.initInformation();
			}
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {
				//跳转页面
				this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType);
			},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				!that.ready && that.nii_common.toastLoading('加载中');
				//开始准备
				that.ready = false;
				//发起请求
				that.nii_common.request.build('v2/goods/lists_information', that.options, 'GET', function (res) {
					//设置准备已就绪
					that.ready = true;
					//设置基本数据
					that.renders = res.data;
					//设置基本信息
					that.data.sections = res.data.sections;
					//获取列表
					that.getGoodLists(true);
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});	
			},
			switchFilter: function (item) {
				//设置对象
				let that = this;
				//设置选中信息
				that.data.sections.switch_alias = item.alias;
				//设置筛选条件
				that.data.sections.filters = item.filters;
				//判断是否存在搜索词
				if (!uni.$u.test.isEmpty(that.data.sections.search_keyword)) {
					//设置筛选条件
					that.data.sections.filters.search_keyword = that.data.sections.search_keyword;
				}
				//获取商品列表
				that.getGoodLists(true);
			},
			searchAction: function () {
				//设置对象
				let that = this;
				//判断是否存在搜索词
				if (!uni.$u.test.isEmpty(that.data.sections.search_keyword)) {
					//设置筛选条件
					that.data.sections.filters.search_keyword = that.data.sections.search_keyword;
				} else {
					//设置筛选条件
					that.data.sections.filters.search_keyword = '';
				}
				//获取商品列表
				that.getGoodLists(true);
			},
			getGoodLists: function(refresh = false) {
				//设置对象
				let that = this;
				//判断是否刷新列表
				if (refresh) {					
					that.data.sections.goods = {mode: 'refresh', page: 1, lists: []};	
				}
				//判断是否无追加内容
				if (that.data.sections.goods.mode !== 'finished' && that.data.sections.goods.mode !== 'empty' && that.data.sections.goods.mode !== 'loading') {				
					//设置刷新
					that.data.sections.goods.mode = 'loading';				
					//发起请求
					that.nii_common.request.build('app/goods/lists', {filters: that.data.sections.filters, page: that.data.sections.goods.page}, 'POST', function (res) {
						//设置已激活
						that.data.sections.goods.mode = 'active';
						//判断是否无数据
						if (uni.$u.test.isEmpty(res.data.lists)) {
							//判断当前页码是否为第一页
							if (parseInt(that.data.sections.goods.page) === 1) {
								//设置数据为空
								that.data.sections.goods.mode = 'empty';
							} else {
								//设置数据已加载完毕
								that.data.sections.goods.mode = 'finished';
							}
						} else {
							//循环列表
							res.data.lists.forEach((good, index) => {
								//增加信息
								that.data.sections.goods.lists.push(good);
							});
							//判断是否为最后一页
							if (parseInt(res.data.lists.length) < parseInt(res.data.page_size)) {
								//设置数据已加载完毕
								that.data.sections.goods.mode = 'finished';
							}
						}
						//增加页码
						that.data.sections.goods.page += 1;
					}, function (res) {
						//提示错误
						that.nii_common.toastAlert(res.msg);
					}, function(res) {
						//隐藏loading
						that.nii_common.toastLoadingHide();
					});	
				}
			},
			// requestDemo: function() {
			// 	//获取对象
			// 	const that = this;
			// 	//loading
			// 	that.nii_common.toastLoading('处理中...');
			// 	//发起请求
			// 	that.nii_common.request.build('', {}, 'POST', function (res) {
			// 		//提示成功
			// 		that.nii_common.toastAlert('处理成功', 'success');
			// 	}, function (res) {
			// 		//提示错误
			// 		that.nii_common.toastAlert(res.msg);
			// 	}, function(res) {
			// 		//隐藏loading
			// 		that.nii_common.toastLoadingHide();
			// 	});	
			// }
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			that.getGoodLists();
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	#header_wrapper {
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		.domxee_icon {
			font-size: 40rpx;
			line-height: 34rpx;
		}
	}
	#content_wrapper {
		padding-bottom: 300rpx;
		#search {
			margin-top: 30rpx;
			.search {
				.search_box {
					padding: 10rpx 10rpx 10rpx 30rpx;
					border-radius: 40rpx;
					.search_icon {
						font-size: 44rpx;
						margin-right: 10rpx;
					}
					.search_input {
						font-size: 28rpx;
						line-height: 40rpx;
						margin-right: 30rpx;
					}
					.search_button {
						border-radius: 26rpx;
						padding: 6rpx 30rpx;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}
			}
		}
		#swicth {
			margin-top: 30rpx;
			.swicth {
				.swicth_box {
					.item {
						.text {							
							font-size: 24rpx;
							line-height: 34rpx;
						}
						.sort {
							margin-left: 10rpx;
							.domxee_icon {							
								font-size: 24rpx;
								line-height: 34rpx;	
							}
						}
					}
				}
			}
		}
		#lists {
			margin-top: 30rpx;
			.lists {
				.lists_box {
					
				}
			}
		}
	}
</style>
